<template>
  <div class="list">
    <img
      src="https://m.kanman.com/static/images/rank/bg-comic-list.png"
      alt=""
    />
    <ul class="">
      <li :class="num == 0 ? 'con' : ''" @click="comprehensive">
        <p>综合榜</p>
      </li>
      <li :class="num == 1 ? 'con' : ''" @click="self"><p>自制榜</p></li>
      <li :class="num == 2 ? 'con' : ''" @click="juvenile"><p>少年榜</p></li>
      <li :class="num == 3 ? 'con' : ''" @click="girl"><p>少女榜</p></li>
      <li :class="num == 4 ? 'con' : ''" @click="works"><p>新作榜</p></li>
      <li :class="num == 5 ? 'con' : ''" @click="horse"><p>黑马榜</p></li>
      <li :class="num == 6 ? 'con' : ''" @click="free"><p>免费榜</p></li>
      <li :class="num == 7 ? 'con' : ''" @click="pay"><p>付费榜</p></li>
      <li :class="num == 8 ? 'con' : ''" @click="end"><p>完结榜</p></li>
      <li :class="num == 9 ? 'con' : ''" @click="Serial"><p>连载榜</p></li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    comprehensive() {
      this.num = 0;
      this.$router.push("/RankingList/comprehensive");
    },
    self() {
      this.num = 1;
      this.$router.push("/RankingList/self");
    },
    juvenile() {
      this.num = 2;
      this.$router.push("/RankingList/juvenile");
    },
    girl() {
      this.num = 3;
      this.$router.push("/RankingList/girl");
    },
    works() {
      this.num = 4;
      this.$router.push("/RankingList/works");
    },
    horse() {
      this.num = 5;
      this.$router.push("/RankingList/horse");
    },
    free() {
      this.num = 6;
      this.$router.push("/RankingList/free");
    },
    pay() {
      this.num = 7;
      this.$router.push("/RankingList/pay");
    },
    end() {
      this.num = 8;
      this.$router.push("/RankingList/end");
    },
    Serial() {
      this.num = 9;
      this.$router.push("/RankingList/Serial");
    },
  },
};
</script>
<style lang="less">
.list {
  padding-top: 45px;
  img {
    position: absolute;
    top: 45px;
    width: 100%;
    z-index: -1;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    li {
      margin: 1% 0;
      width: 12%;
      padding: 0 4%;
      font-size: 14px;
      color: white;
      p {
        border-bottom: 1px solid transparent;
        margin: 0;
        padding-bottom: 2px;
      }
    }
    .con {
      p {
        border-bottom: 1px solid white;
      }
    }
  }
}
</style>